import { LabelIconTip, ProCard, ProColumns, ProForm, ProFormDatePicker, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea, ProTable } from "@ant-design/pro-components";
import { Col, Divider, QRCode, Row } from "antd";
import moment from "moment";

const App:React.FC=()=>{
    interface DataType{
        sno?:number,code?:string,name?:string,type?:string,status?:string,sop?:string,review?:string,
        begindate?:string,enddate?:string,position?:string,degree?:string,operater?:string,
     };

     const columns:ProColumns<DataType>[]=[
        {dataIndex:'sno',title:'操作顺序'},
        {dataIndex:'code',title:'保养项目编码'},{dataIndex:'name',title:'项目名称'},
        {dataIndex:'type',title:'类型'},{dataIndex:'degree',title:'保养等级'},{dataIndex:'sop',title:'SOP'},
        {dataIndex:'begindate',title:'开始时间',valueType:'dateTime'},{dataIndex:'enddate',title:'结束时间',valueType:'dateTime'},
        {dataIndex:'review',title:'保养评价'},
        {dataIndex:'status',title:'状态'},
     ];

     const tdata:DataType[]=[
        {sno:1,code:'A001',name:'XX加工中心控制柜',type:'关键部位点检',status:'正常',sop:'《XX加工中心保养作业指导A001》',
         begindate:'2025-02-11 14:15:00',enddate:'2025-02-11 15:30:00',degree:'保养A级',review:'合格', },
         {sno:2,code:'A002',name:'XX加工中心辊轴',type:'关键部位点检',status:'正常',sop:'《XX加工中心保养作业指导A001》',
            begindate:'2025-02-11 14:15:00',enddate:'2025-02-11 15:30:00',degree:'保养B级',review:'合格', },
            {sno:3,code:'A003',name:'XX加工中心传动组',type:'维护',status:'正常',sop:'《XX加工中心保养作业指导A001》',
                begindate:'2025-02-11 14:15:00',enddate:'2025-02-11 15:30:00',degree:'保养A级',review:'合格', },
                {sno:4,code:'A004',name:'XX加工中心易损件',type:'更换备件',status:'正常',sop:'《XX加工中心保养作业指导A001》',
                    begindate:'2025-02-11 14:15:00',enddate:'2025-02-11 15:30:00',degree:'保养A级',review:'良好', },
                    {sno:5,code:'A005',name:'XX加工中心仪表',type:'关键部位点检',status:'正常',sop:'《XX加工中心保养作业指导A001》',
                        begindate:'2025-02-11 14:15:00',enddate:'2025-02-11 15:30:00',degree:'保养B级',review:'不合格', },
        
     ];
 

    return <>
         <ProCard title='执行保养记录' style={{height:700}}
         >
            <ProForm layout="horizontal" labelAlign="left" labelCol={{offset:0,span:3}} submitter={false}
             style={{marginLeft:300}} labelWrap
        >
            <Row gutter={8}>
                <Col span={4}>
                   <QRCode value="KM0012-006" size={120}  />
                </Col>
                <Col span={20}>
                   <ProFormText name='f1' label='设备编号' width={200} />
                   <ProFormText name='f2' label='设备名称' width={200} />
                </Col>
            </Row>
          </ProForm>
            <Divider />
            <ProForm submitter={false} layout='horizontal' labelAlign="left" labelCol={{span:6,offset:0}}>
               <Row gutter={8}>
                  <Col span={6}>
                     <ProFormText name='f1' label='任务编号' width={200}/>
                     <ProFormText name='f12' label='保养类型' width={200}/>
                     <ProFormText name='f2' label='保养人' width={200}/>
                  </Col>
                  <Col span={6}>
                     <ProFormSelect name='f3' label='部门' width={200}/>
                     <ProFormText name='f4' label='位置' width={200}/>
                     <ProFormRadio.Group name='f41' label='状态' width={200}
                        options={[{value:1,label:'在用'},{value:2,label:'闲置'},{value:3,label:'外租'}]}
                     />
                  </Col>
                  <Col span={6}>
                     <ProFormDatePicker name='f5' label='设备编号' width={200}/>
                     <ProFormDatePicker name='f6' label='设备名称' width={200}/>
                     <ProFormText name='f7' label='规格型号' width={200}   />
                  </Col>
                  <Col span={6}>
                    <ProFormDatePicker name='f81' label='上次保养日期' width={200}  />
                    <ProFormDatePicker name='f82' label='保养到期日' width={200}  />
                    <ProFormDatePicker name='f8' label='本次保养日期' width={200} initialValue={moment().format('YYYY-MM-DD')}/>
                  </Col>
                </Row> 
            </ProForm>
             <ProTable<DataType>
                search={false}
                options={false}
                columns={columns}
                dataSource={tdata}

                />
         </ProCard>
    </>;
};

export default App;